import React, { useState, useEffect } from 'react'
import { Table, Button, Input, Modal, Form, message, Select, Space, Popconfirm, InputNumber, Dropdown, Tag } from 'antd';
import axios from 'axios';
export default function OrderManage() {
  const [dataSource, setDataSource] = useState([])
  const [messageApi, contextHolder] = message.useMessage();
  const [open, setOpen] = useState(false);
  const [nowItem, setNowItem] = useState("");
  const [goodsList, setGoodsList] = useState([])
  const [goodsSelect, setGoodsSelect] = useState([])
  const orderState = ["下单", "锁单", "生产中", "完成生产", "待发货", "已发货"]
  useEffect(() => {
    getData()
  }, [])
  const getData = () => {
    axios.get("/sale/selectproduct").then(res => {
      setDataSource(res.data)
      axios.get("/goods/selectall").then(res => {
        var data = []
        for (var i = 0; i < res.data.length; i++) {
          data.push({
            value: i,
            label: res.data[i].goodsname
          })
        }
        setGoodsSelect(data)
        setGoodsList(res.data)
      })
    })
  }
  const startProduct = (item) => {
    axios.get("/sale/setstart?id=" + item.id).then(res => {
      if (res.data != null) {
        messageApi.open({
          type: 'success',
          content: '开始生产',
        });
        var nowdata = [...dataSource]
        let targetObject = nowdata.find(obj => obj.id === res.data.id);
        if (targetObject) {
          targetObject.prostartime = res.data.prostartime;
          targetObject.orderstate = res.data.orderstate;
        }
        setDataSource(nowdata)
      }
    })

  }
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      align: "center",
      width: "10%",
      render: (text, record, index) => {
        return <span style={{ fontSize: "12px" }}>{index + 1}</span>
      }
    },
    {
      title: '订单名称',
      dataIndex: 'ordername',
      key: 'ordername',
      align: "center",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '生产商品',
      dataIndex: 'goodsid',
      key: 'goodsid',
      align: "center",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{goodsList.filter(res => { return res.id === text })[0]?.goodsname}</span>
      }
    },
    {
      title: '生产数量',
      dataIndex: 'goodsnum',
      key: 'goodsnum',
      align: "center",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '下单时间',
      dataIndex: 'ordertime',
      key: 'ordertime',
      align: "center",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '生产开始时间',
      dataIndex: 'prostartime',
      key: 'prostartime',
      align: "center",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text === null ? "无" : text}</span>
      }
    },
    {
      title: '生产完成时间',
      dataIndex: 'proendtime',
      key: 'proendtime',
      align: "center",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text === null ? "无" : text}</span>
      }
    },
    {
      title: '订单状态',
      dataIndex: 'orderstate',
      key: 'orderstate',
      align: "center",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{orderState[text]}</span>
      }
    },
    {
      title: '操作',
      dataIndex: 'operate',
      key: 'operate',
      fixed: 'right',
      align: "center",
      render: (text, item) => {
        return <Space>
          <Popconfirm
            title={"提示"}
            description={"确定开始生产吗?"}
            okText="确定"
            cancelText="取消"
            onConfirm={() => { if (item.orderstate === 1) { startProduct(item) } }}
            disabled={!(item.orderstate === 1)}
          >
            <a style={{ fontSize: "12px", color: item.orderstate === 1 ? "#4e9dfd" : "gray" }} disabled={!(item.orderstate === 1)}>开始生产</a>
          </Popconfirm>
        </Space>
      }
    }
  ];
  // const deleteGoods = (item) => {
  //   axios.get("/goods/delete?id=" + item.id).then(res => {
  //     if (res.data > 0) {
  //       messageApi.open({
  //         type: 'success',
  //         content: '删除成功',
  //       });
  //       setDataSource(dataSource.filter(res => { return res.id !== item.id }))
  //     }
  //   })
  // }
  // const CollectionCreateForm = ({ open, onCreate, onCancel }) => {
  //   const [form] = Form.useForm();
  //   return (
  //     <Modal
  //       open={open}
  //       title={nowItem !== "" ? "修改商品" : "新增商品"}
  //       okText="确定"
  //       cancelText="取消"
  //       onCancel={onCancel}
  //       onOk={() => {
  //         form
  //           .validateFields()
  //           .then((values) => {
  //             form.resetFields();
  //             onCreate(values);
  //           })
  //           .catch((info) => {
  //             console.log('Validate Failed:', info);
  //           });
  //       }}
  //     >
  //       <Form
  //         form={form}
  //         layout="vertical"
  //         name="form_in_modal"
  //         initialValues={{
  //           goodsname: nowItem?.goodsname,
  //           goodsclass: nowItem?.goodsclass,
  //           goodscode: nowItem?.goodscode,
  //         }}
  //       >
  //         <Form.Item
  //           name="goodsname"
  //           label="商品名称"
  //           rules={[
  //             {
  //               required: true,
  //               message: '未输入商品名称！',
  //             },
  //           ]}
  //         >
  //           <Input />
  //         </Form.Item>
  //         <Form.Item
  //           name="goodsclass"
  //           label="所属品类"
  //           rules={[
  //             {
  //               required: true,
  //               message: '未输入所属品类！',
  //             },
  //           ]}
  //         >
  //           <Input />
  //         </Form.Item>
  //         <Form.Item
  //           name="goodscode"
  //           label="识别码"
  //           rules={[
  //             {
  //               required: true,
  //               message: '未输入识别码！',
  //             },
  //           ]}
  //         >
  //           <Input />
  //         </Form.Item>
  //       </Form>
  //     </Modal>
  //   );
  // };
  // const onCreate = (values) => {
  //   if (nowItem !== "") {
  //     axios.post("/goods/update", {
  //       id: nowItem.id,
  //       ...values
  //     }).then(res => {
  //       if (res.data) {
  //         messageApi.open({
  //           type: 'success',
  //           content: '修改成功',
  //         });
  //         var nowdata = dataSource
  //         let targetObject = nowdata.find(obj => obj.id === nowItem.id);
  //         if (targetObject) {
  //           targetObject.goodsname = values.goodsname;
  //           targetObject.goodsclass = values.goodsclass;
  //           targetObject.goodscode = values.goodscode;
  //         }
  //         setDataSource(nowdata)
  //         setNowItem("")
  //       }
  //     })
  //   } else {
  //     axios.post("/goods/insert", values).then(res => {
  //       if (res.data) {
  //         messageApi.open({
  //           type: 'success',
  //           content: '添加成功',
  //         });
  //         setDataSource([...dataSource, res.data])

  //       }
  //     })
  //   }

  //   setOpen(false);
  // };
  return (
    <div>
      <div >
        {contextHolder}
        <div style={{ textAlign: "right", padding: "0 10px" }}><Button onClick={() => { getData() }}>刷新</Button></div>
        <Table
          columns={columns} dataSource={dataSource} style={{ margin: "5px 0 0 0" }}
          rowKey={(item) => item.id}
          pagination={{}}
          size='small'
        >
        </Table>
      </div>
      {/* <CollectionCreateForm
        open={open}
        onCreate={onCreate}
        onCancel={() => {
          setOpen(false);
          setNowItem("")
        }}
      /> */}
    </div>
  )
}
